import { useEffect, useState } from 'react'
import { getCssVar, setCssVar } from '@/hooks/useCssVar'

export default function CssVarTest() {
  const [primaryColor, setPrimaryColor] = useState<string>('')
  const [customColor, setCustomColor] = useState<string>('')

  useEffect(() => {
    // 获取当前CSS变量值
    const primary = getCssVar('primary-color')
    const custom = getCssVar('custom-color')
    
    setPrimaryColor(primary)
    setCustomColor(custom)
    
    console.log('CSS变量测试:')
    console.log('--primary-color:', primary)
    console.log('--custom-color:', custom)
    
    // 检查所有CSS变量
    const root = document.documentElement
    const computedStyle = getComputedStyle(root)
    console.log('所有CSS变量:')
    console.log('--primary-color:', computedStyle.getPropertyValue('--primary-color'))
    console.log('--success-color:', computedStyle.getPropertyValue('--success-color'))
    console.log('--warning-color:', computedStyle.getPropertyValue('--warning-color'))
    console.log('--error-color:', computedStyle.getPropertyValue('--error-color'))
  }, [])

  const handleSetCustomColor = () => {
    setCssVar('custom-color', '#ff6b6b')
    setCustomColor('#ff6b6b')
  }

  const handleSetPrimaryColor = () => {
    setCssVar('primary-color', '#ff6b6b')
    setPrimaryColor('#ff6b6b')
  }

  return (
    <div className="p-6 space-y-4">
      <h2 className="text-2xl font-bold">CSS变量测试</h2>
      
      <div className="space-y-2">
        <div>
          <strong>主色调:</strong> {primaryColor || '未设置'}
          <div 
            className="w-8 h-8 border rounded ml-2 inline-block" 
            style={{ backgroundColor: primaryColor || 'transparent' }}
          />
        </div>
        
        <div>
          <strong>自定义颜色:</strong> {customColor || '未设置'}
          <div 
            className="w-8 h-8 border rounded ml-2 inline-block" 
            style={{ backgroundColor: customColor || 'transparent' }}
          />
        </div>
      </div>

      <div className="space-x-2">
        <button 
          onClick={handleSetPrimaryColor}
          className="px-4 py-2 bg-blue-500 text-white rounded"
        >
          设置主色调为红色
        </button>
        <button 
          onClick={handleSetCustomColor}
          className="px-4 py-2 bg-green-500 text-white rounded"
        >
          设置自定义颜色
        </button>
      </div>

      <div className="bg-gray-100 p-4 rounded">
        <h3 className="font-semibold mb-2">调试信息</h3>
        <pre className="text-sm">
{`主色调: ${primaryColor}
自定义颜色: ${customColor}
请查看控制台获取更多信息`}
        </pre>
      </div>
    </div>
  )
} 